<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        .banner{
            background-color: rgb(218, 218, 218);
           
            height: 400px;
        }
        .title{
            font-size:70px;
            text-align: center;
            color: #06d1e8;
        }
        .site-header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky; 
  top: 0;
  z-index: 100;
}
 /* jj */
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 20px;
}
 
.logo img {
  height: 40px;
}
 
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 30px;
}
 
.main-nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.2s;
}
 
.main-nav a:hover {
  color: #0066cc;
}
 
.header-actions {
  display: flex;
  gap: 15px;
}
 
.btn-login {
  background: #0066cc;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
}
  .mobile-hidden {
    display: none;
  }
  @media (min-width: 768px) {
    .hamburger {
      display: none;
    }
    .main-nav {
      display: flex !important;
    }
  }
    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .carousel-container {
            position: relative;
            max-width: 800px;
            margin: 20px auto;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .carousel-slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: 400px;
        }
        
        .carousel-slide {
            min-width: 100%;
            height: 400px;
        }
        
        .carousel-slide img {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }
        
        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 18px;
            border-radius: 50%;
            z-index: 10;
        }
        
        .carousel-control.prev {
            left: 10px;
        }
        
        .carousel-control.next {
            right: 10px;
        }
        
        .carousel-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }
        
        .carousel-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            border: none;
        }
        
        .carousel-indicator.active {
            background-color: white;
        }
         .player-sidebar {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 450px;
        }
        
        /* 标题样式 */
        .player-sidebar h3 {
            color: #00529F;
            margin-bottom: 25px;
            padding-bottom: 12px;
            border-bottom: 3px solid #FFD700;
            font-size: 1.5rem;
            font-weight: bold;
            text-align: center;
        }
        
        /* 球员项样式 */
        .player-item {
            display: flex;
            margin-bottom: 25px;
            padding-bottom: 25px;
            border-bottom: 1px dashed #ddd;
            transition: all 0.3s ease;
        }
        
        .player-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .player-item:hover {
            transform: translateX(8px);
            background-color: #f8faff;
            padding: 15px;
            border-radius: 6px;
        }
        
        /* 球员图片 */
        .player-image {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 50%;
            margin-right: 20px;
            border: 3px solid #00529F;
            transition: transform 0.3s;
        }
        
        .player-item:hover .player-image {
            transform: scale(1.1);
            border-color: #FFD700;
        }
        
        /* 球员信息 */
        .player-info {
            flex: 1;
        }
        
        .player-info h4 {
            color: #00529F;
            margin-bottom: 8px;
            font-size: 1.3rem;
            line-height: 1.3;
            font-weight: bold;
        }
        
        .player-position {
            display: inline-block;
            background-color: #00529F;
            color: white;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .player-number {
            display: inline-block;
            background-color: #FFD700;
            color: #333;
            padding: 3px 10px;
            border-radius: 50%;
            font-size: 0.9rem;
            font-weight: bold;
            margin-left: 8px;
        }
        
        .player-stats {
            color: #666;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        .player-stats span {
            display: block;
            margin-bottom: 3px;
        }
        
        /* 查看全部链接 */
        .view-all-players {
            display: inline-block;
            text-align: center;
            margin-top: 20px;
            color: #00529F;
            text-decoration: none;
            font-weight: bold;
            padding: 10px 25px;
            border-radius: 25px;
            width: 100%;
            transition: all 0.3s;
            border: 2px solid #00529F;
            background-color: white;
        }
        
        .view-all-players:hover {
            color: white;
            background-color: #00529F;
            text-decoration: none;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 82, 159, 0.3);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .player-sidebar {
                padding: 25px;
                max-width: 100%;
            }
            
            .player-item {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            
            .player-image {
                margin-right: 0;
                margin-bottom: 15px;
                width: 100px;
                height: 100px;
            }
            
            .player-position, .player-number {
                display: block;
                margin: 0 auto 8px;
            }
        }

        .banner {
  background-color: rgb(218, 218, 218);
  height: 400px;
  position: relative; /* 添加相对定位 */
}

.left-image {
  position: absolute; /* 绝对定位 */
  left: calc(50% - 850px); /* 计算左侧位置 */
  top: 20px; /* 与轮播图的垂直间距 */
  width: 350px; /* 图片宽度 */
  height: 350px; /* 图片高度，略小于轮播图 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* z-index: 10; 确保在轮播图上方 */
}

.left-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.right-image {
  position: absolute;
  right: calc(50% - 800px); /* 与左侧图片对称 */
  top: 20px;
  width: 300px; /* 你要求的300px宽度 */
  height: 350px; /* 保持与左侧图片相同高度 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.right-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 调整banner区域以确保有足够空间 */
.banner {
  position: relative;
  height: 400px;
  min-width: 1600px; /* 确保有足够宽度容纳所有元素 */
  overflow: visible; /* 允许内容超出 */
}

/* 调整轮播图容器的样式 */
.carousel-container {
  position: relative;
  width: 800px; /* 固定宽度 */
  margin: 20px auto; /* 保持居中 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
    /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 0;
        }
        
        /* 头部和导航 */
        header {
            background-color: #00529F;
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            height: 60px;
            margin-right: 15px;
        }
        
        .logo h1 {
            font-size: 1.8rem;
            font-weight: bold;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 20px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        
        nav ul li a:hover {
            background-color: #003366;
        }
        
        /* 主内容区布局 */
        .main-content {
            display: grid;
            grid-template-columns: 300px 1fr; /* 左侧固定宽度，右侧自适应 */
            gap: 30px;
            margin-top: 30px;
        }
        
        /* 球员侧边栏样式 (左侧) */
        .player-sidebar {
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            height: fit-content;
            position: sticky;
            top: 20px; /* 粘性定位，滚动时保持可见 */
        }
        
        .player-sidebar h3 {
            color: #00529F;
            margin-bottom: 25px;
            padding-bottom: 12px;
            border-bottom: 3px solid #FFD700;
            font-size: 1.5rem;
            font-weight: bold;
            text-align: center;
        }
        
        /* 新闻内容区样式 (右侧) */
        .news-content {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        
        .news-article {
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 1px solid #eee;
        }
        
        .news-article:last-child {
            border-bottom: none;
        }
        
        .news-article h2 {
            color: #00529F;
            margin-bottom: 15px;
            font-size: 1.8rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            
            .player-sidebar {
                position: static;
                order: 2; /* 移动端将球员栏放在新闻下面 */
                margin-top: 30px;
            }
        }
        
        /* 球员项样式 (保持原有样式) */
        .player-item {
            display: flex;
            margin-bottom: 25px;
            padding-bottom: 25px;
            border-bottom: 1px dashed #ddd;
            transition: all 0.3s ease;
        }
        
        .player-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .player-item:hover {
            transform: translateX(8px);
            background-color: #f8faff;
            padding: 15px;
            border-radius: 6px;
        }
        
        .player-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 50%;
            margin-right: 15px;
            border: 3px solid #00529F;
            transition: transform 0.3s;
        }
    </style>
</head>
<body>
    <header class="site-header">
  <div class="container"> <!-- 限制宽度，避免内容过宽 -->
    <div class="header-content">
      <!-- 1. 品牌标识 -->
      <div>
        Real Madrid
      </div>
      <img src="./Screenshot 2025-05-22 230324.png">
       <img src="./Screenshot 2025-05-24 172125.png">
      
      <!-- 2. 主导航 -->
      <nav class="main-nav">
        <ul>
          <li><a href="https://baike.baidu.com/item/%E7%9A%87%E5%AE%B6%E9%A9%AC%E5%BE%B7%E9%87%8C%E8%B6%B3%E7%90%83%E4%BF%B1%E4%B9%90%E9%83%A8/4606558">球队简介</a></li>
          <li><a href="https://www.realmadrid.com/fr-FR/le-club/histoire">荣誉</a></li>
          <li><a href="https://www.realmadrid.com/en-US/football/first-team/players">一线队</a></li>
          <li><a href="https://www.realmadrid.com/en-US">官网</a></li>
        </ul>
      </nav>
      
      <!-- 3. 辅助功能 -->
      <div class="header-actions">
        <button class="btn-search">登录</button>
        <!-- <script>
        prompt("用户名")
        prompt("密码")
        alert("骗你的，根本没做")

        </script> -->
        
      </div>
    </div>
  </div>
  
  
</header>
    <div class="title">Real Madrid</div>
  <!-- <div class="banner"> <img  src="./Screenshot 2025-05-17 173542.png" alt="falt" width="150" ></div> -->
<button class="hamburger" onclick="toggleMenu()">☰</button>
<!-- <nav class="main-nav mobile-hidden">
  
</nav> -->
<div class="banner">
    <div class="left-image">
    <img src="./Screenshot 2025-05-17 173542.png" alt="左侧小图片">
  </div>
  
 
<div class="carousel-container">
        <div class="carousel-slides">
            <div class="carousel-slide">
                <img src="./8f3b6b07bbaf98b_size525_w1024_h1462.jpg"alt="Slide 1">
            </div>
            <div class="carousel-slide">
                <img src="./9534-59848b3059ecc45f5b00f54aa4dcf33b.jpg" alt="Slide 2">
            </div>
            <div class="carousel-slide">
                <img src="./R-C(1).jpg" alt="Slide 3">
            </div>
            <div class="carousel-slide">
                <img src="./OIP-C(1).jpg" alt="Slide 4">
            </div>
        </div>
        
        <button class="carousel-control prev">&#10094;</button>
        <button class="carousel-control next">&#10095;</button>
        
        <div class="carousel-indicators">
            <button class="carousel-indicator active" data-index="0"></button>
            <button class="carousel-indicator" data-index="1"></button>
            <button class="carousel-indicator" data-index="2"></button>
            <button class="carousel-indicator" data-index="3"></button>
        </div>
    </div>
    <div class="right-image">
        <img src="./Screenshot 2025-05-25 220249.png" alt="右侧图片">
    </div>
  </div>
     <div class="container">
        <div class="main-content">
            <!-- 左侧球员介绍侧边栏 -->
            <aside class="player-sidebar">
                <h3>明星球员</h3>
                
                <div class="player-item">
                     <a href="https://baike.baidu.com/item/%E7%A5%96%E5%BE%B7%C2%B7%E8%B4%9D%E6%9E%97%E5%8E%84%E5%A7%86?fromModule=lemma_search-box" ><img src="./Jude Bellinham.png" alt="罗德里戈" class="player-image"></a> 
                    <div class="player-info">
                        <h4>裘德·贝林厄姆 <span class="player-number">5</span></h4>
                        <span class="player-position">中场</span>
                        <div class="player-stats">
                            <span><strong>国籍:</strong> 英格兰</span>
                            <span><strong>年龄:</strong> 20岁</span>
                            <span><strong>进球:</strong> 12球</span>
                        </div>
                    </div>
                </div>
                
                <div class="player-item">
                     <a href="https://baike.baidu.com/item/%E7%BB%B4%E5%B0%BC%E4%BF%AE%E6%96%AF%C2%B7%E5%84%92%E5%B0%BC%E5%A5%A5%E5%B0%94/20389252" ><img src="./Vini.png" alt="罗德里戈" class="player-image"></a> 
                    <div class="player-info">
                        <h4>维尼修斯·儒尼奥尔 <span class="player-number">7</span></h4>
                        <span class="player-position">前锋</span>
                        <div class="player-stats">
                            <span><strong>国籍:</strong> 巴西</span>
                            <span><strong>年龄:</strong> 23岁</span>
                            <span><strong>进球:</strong> 8球</span>
                        </div>
                    </div>
                </div>
                
                <div class="player-item">
                  <a href="https://baike.baidu.com/item/%E7%BD%97%E5%BE%B7%E9%87%8C%E6%88%88%C2%B7%E5%B8%AD%E5%B0%94%E7%93%A6%C2%B7%E5%BE%B7%E6%88%88%E5%9F%83%E6%96%AF/60736141" ><img src="./Rodrigo.png" alt="罗德里戈" class="player-image"></a> 
                    <div class="player-info">
                        <h4>罗德里戈·戈斯 <span class="player-number">11</span></h4>
                        <span class="player-position">前锋</span>
                        <div class="player-stats">
                            <span><strong>国籍:</strong> 巴西</span>
                            <span><strong>年龄:</strong> 22岁</span>
                            <span><strong>进球:</strong> 6球</span>
                        </div>
                    </div>
                </div>
                
                <a href="https://www.realmadrid.com/en-US/football/first-team/players" class="view-all-players">查看完整阵容</a>
            </aside>
            
            <!-- 右侧新闻内容 -->
            <main class="news-content">
                <article class="news-article">
                    <h2>皇马4-0大胜格拉纳达，贝林厄姆梅开二度</h2>
                    <div class="news-meta">
                        <span class="news-date">2023年12月2日</span>
                        <span class="news-category">比赛报道</span>
                    </div>
                    
                    <div class="news-content">
                        <p>在刚刚结束的西甲第15轮比赛中，皇家马德里主场4-0大胜格拉纳达。英格兰中场贝林厄姆表现出色，梅开二度，维尼修斯和罗德里戈各入一球。</p>
                        <p>比赛第19分钟，贝林厄姆接克罗斯精准直塞，单刀破门首开纪录。下半场第56分钟，贝林厄姆再次展现个人能力，禁区前沿一脚世界波将比分扩大为2-0。第73分钟，维尼修斯左路内切后低射破门。补时阶段，罗德里戈锦上添花，将最终比分锁定为4-0。</p>
                        <a href="#" class="read-more">阅读全文</a>
                    </div>
                </article>
                
                <article class="news-article">
                    <h2>伯纳乌球场改造工程即将完工</h2>
                    <div class="news-meta">
                        <span class="news-date">2023年11月28日</span>
                        <span class="news-category">俱乐部新闻</span>
                    </div>
                    
                    <div class="news-content">
                        <p>皇家马德里主场圣地亚哥·伯纳乌球场的现代化改造工程已进入最后阶段。新球场将配备可伸缩屋顶、360度视频记分牌和全新的餐饮设施。</p>
                        <p>俱乐部主席弗洛伦蒂诺·佩雷斯在最近的新闻发布会上表示："伯纳乌球场将成为世界上最好的足球场。这个项目不仅提升了球场设施，还将为球迷带来前所未有的观赛体验。"</p>
                        <a href="#" class="read-more">阅读全文</a>
                    </div>
                </article>
            </main>
        </div>
    </div>

    <!-- <script>
        // 动态项点击事件
        document.addEventListener('DOMContentLoaded', function() {
            const newsItems = document.querySelectorAll('.news-side-item');
            
            newsItems.forEach(item => {
                item.addEventListener('click', function() {
                    const title = this.querySelector('h4').textContent;
                    alert(`您点击了: ${title}\n这是模拟功能，实际网站可以链接到详情页`);
                });
            });
            
            // 查看全部链接点击事件
            const viewAllLink = document.querySelector('.view-all');
            if (viewAllLink) {
                viewAllLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    alert('这是模拟功能，实际网站会跳转到所有动态列表页');
                });
            }
        });
    </script> -->
<script>
        document.addEventListener('DOMContentLoaded', function() {
            const slides = document.querySelector('.carousel-slides');
            const slideItems = document.querySelectorAll('.carousel-slide');
            const prevBtn = document.querySelector('.carousel-control.prev');
            const nextBtn = document.querySelector('.carousel-control.next');
            const indicators = document.querySelectorAll('.carousel-indicator');
            
            let currentIndex = 0;
            const totalSlides = slideItems.length;
            
            // 更新轮播图位置和指示器状态
            function updateCarousel() {
                slides.style.transform = `translateX(-${currentIndex * 100}%)`;
                
                indicators.forEach((indicator, index) => {
                    indicator.classList.toggle('active', index === currentIndex);
                });
            }
            
            // 下一张
            function nextSlide() {
                currentIndex = (currentIndex + 1) % totalSlides;
                updateCarousel();
            }
            
            // 上一张
            function prevSlide() {
                currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
                updateCarousel();
            }
            
            // // 自动轮播
            // let autoPlay = setInterval(nextSlide, 3000);
            
            // // 鼠标悬停时暂停自动轮播
            // const carouselContainer = document.querySelector('.carousel-container');
            // carouselContainer.addEventListener('mouseenter', () => {
            //     clearInterval(autoPlay);
            // });
            
            // carouselContainer.addEventListener('mouseleave', () => {
            //     autoPlay = setInterval(nextSlide, 3000);
            // });
            
            // 按钮点击事件
            nextBtn.addEventListener('click', nextSlide);
            prevBtn.addEventListener('click', prevSlide);
            
            // 指示器点击事件
            indicators.forEach(indicator => {
                indicator.addEventListener('click', function() {
                    currentIndex = parseInt(this.getAttribute('data-index'));
                    updateCarousel();
                });
            });
        });
    </script>













</body>
</html>